<template>
  <div class="container">
    <h2>多 Y 轴示例</h2>
    <div class="chart-container">
      <div id="multipleYAxes" style="height:500px"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "multipleYAxes",
  data() {
    return {
      option: {
        title: {
          text: "多 Y 轴示例 ",
        },
        // 提示组件
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["Evaporation", "Precipitation", "Temperature"],
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "Evaporation",
            show: true,
            // min: 0,
            // max: 250,
            // interval: 100, // Y 轴 刻度 间隔
            axisLabel: {
              formatter: "{value} ml",
            },
          },
          {
            type: "value",
            name: "Precipitation",
            show: true,
            offset: 89,
            // min: 0,
            // max: 250,
            // interval: 100, // Y 轴 刻度 间隔
            axisLabel: {
              // formatter: "{value} ml",
            },
          },
          {
            type: "value",
            name: "Temperature",
            show: true,
            // min: 0,
            // max: 25,
            // interval: 5,
            axisLabel: {
              formatter: "{value} °C",
            },
          },
        ],
        series: [
          {
            name: "Evaporation",
            type: "bar",
            yAxisIndex: 0,
            label: {
              show: true,
              position: "top",
            },
            data: [2.0, 4.9, 7.0, 23.2],
          },
          {
            name: "Precipitation",
            type: "bar",
            yAxisIndex: 1,
            label: {
              show: true,
              position: "top",
            },
            data: [20.6, 500.9, 90.0, 260.4],
          },
          {
            name: "Temperature",
            type: "line",
            yAxisIndex: 2,
            label: {
              show: true,
              position: "top",
            },
            data: [2.0, 2.2, 3.3, 400.5],
          },
        ],
      },
    };
  },
  mounted() {
    this.getLineChart();
  },
  methods: {
    // 设置折线图
    getLineChart() {
      this.lineChart = this.$echart.init(
        document.getElementById("multipleYAxes")
      );
      this.lineChart.setOption(this.option);
    },
  },
};
</script>

<style lang="less">
.chart-container {
  canvas {
    // width: 200px !important;
  }
}
</style>